<template>
	<view>

		<view>
			<view class="dateView">2021年/01月/01日</view>
				<view class="contentView">
					<view class="leftFont">身高</view>
					<view class="rightFont">178cm</view>
				</view>
				
				<view class="contentView">
					<view class="leftFont">体重 </view>
					<view class="rightFont">74kg</view>
				</view>
				
				<view class="contentView">
					<view class="leftFont">血压</view>
					<view class="rightFont">178cm</view>
				</view>
				
				<view class="contentView">
					<view class="leftFont">血糖</view>
					<view class="rightFont">178cm</view>
				</view>
				
				<view class="contentView">
					<view class="leftFont">体温</view>
					<view class="rightFont">178cm</view>
				</view>
				
				<view class="contentView">
					<view class="leftFont">心率</view>
					<view class="rightFont">178cm</view>
				</view>

		</view>
		
		
		<view class="btnView">
			<view class="btnLeft" @tap="Look">查看</view>
			<view class="btnRight" @tap="evaluate">评价</view>
		</view>

				<neil-modal :show="showLook" @close="closeModal('1')" title="请填写信息"  @confirm="bindBtn1('confirm')">
			    <view class="input-view" style="width: 460rpx;height: 400rpx;">
			        <view class="input-name">
			            <view>名称:</view>
			            <input type="text" placeholder="请输入服务包名"  placeholder-style="font-size:27rpx" style="font-size: 27rpx;"/>
			        </view>
			        <view class="input-password">
			            <view>数据:</view>
			            <!-- <input type="text"  placeholder="请输入描述" style="width:200rpx;height: 200rpx;" /> -->
						
						<textarea style=";margin-top: 260rpx;width: 300px;font-size: 27rpx;" placeholder="请填写描述" placeholder-style="font-size:27rpx" ></textarea>
						
			        </view>
			    </view>
			</neil-modal>
			
			
			
			
			
			
			<neil-modal :show="showEvaluate" @close="closeModal('2')" title="评价"  @confirm="bindBtn2('confirm')">
			    <view class="input-view" style="width: 460rpx;height: 400rpx;">
			        
			        <view class="input-password">
			            <!-- <input type="text"  placeholder="请输入描述" style="width:200rpx;height: 200rpx;" /> -->
						
						<textarea style=";margin-top: 260rpx;width: 300px;font-size: 27rpx;" placeholder="请填写评价" placeholder-style="font-size:27rpx" ></textarea>
						
			        </view>
			    </view>
			</neil-modal>

	</view>
</template>

<script>
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	export default {
		components: {
		    neilModal
		},
		data() {
			return {
			showLook:false,
			showEvaluate:false,
			}
		},
		methods: {
			closeModal(type) {
			    console.log(`监听到close`)
			    this[`show${type}`] = false
				
				
				if(type==1){
					this.showLook = false
				}else{
					this.showEvaluate=false
				}
			},
			bindBtn1(type) {
			    uni.showToast({
			        title: `点击了${type==='cancel'?'取消':'确定'}按钮`,
			        icon: 'none'
			    })
			},
			bindBtn2(type) {
			    uni.showToast({
			        title: `点击了${type==='cancel'?'取消':'确定'}按钮`,
			        icon: 'none'
			    })
			},
			Look(){
				this.showLook = true
			},
			evaluate(){
				this.showEvaluate=true
			}
			
		}
	}
</script>

<style>
	.input-name,
	.input-password {
	    height: 80upx;
	    width: 100%;
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	    position: relative;
	    padding-left: 30upx;
	    box-sizing: border-box;
	}
	
	.input-name::after {
	    content: " ";
	    position: absolute;
	    left: 30upx;
	    bottom: 0;
	    right: 0;
	    height: 1px;
	    border-top: 1px solid #e5e5e5;
	    transform-origin: 0 0;
	    transform: scaleY(.5);
	}
	
	.input-name view,
	.input-password view {
	    width: 120upx;
	    height: 50upx;
	    line-height: 50upx;
	    font-size: 28upx;
	    color: #333333;
	}
	
	.input-name input,
	.input-password input {
	    flex: 1;
	    height: 50upx;
	    line-height: 50upx;
	}
	.btnRight {
		width: 260rpx;
		height: 80rpx;
		background: #73A8E3;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	
	
	
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
	
	.btnLeft {
		width: 260rpx;
		height: 80rpx;
		border: 2rpx solid #3885DB;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	
	
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #73A8E3;
	}
	
	.btnView {
		display: flex;
		justify-content: space-around;
		margin-top: 100rpx;
	}
	.leftFont{
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		
		padding: 36rpx 0 37rpx 39rpx;
	}
	
	.rightFont{
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #989898;
		
		padding: 40rpx 39rpx 37rpx 0;
	}
	.contentView{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #DCDCDC;
	}
	.dateView {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		padding: 35rpx 0 33rpx 39rpx;
		border-bottom: 1px solid #DCDCDC;
	}
</style>
